<template>
	<view class="content">
		<uni-calendar v-if="isShow" v-model="monthday" :monthday="monthday" :daytime="daytime" :insert="true" @change="change" @ifShow="ifShow" @getMonthList="getMonthList" @getRankingList="getRankingList" @getUserInfo="getUserInfo"  @getMonthInfo="getMonthInfo"/>
		<view class="topBg"></view>
		<view class="top">
			<view class="topItem" v-for="(item,index) in topList" :key="index">
				<view class="time">{{item.num}}<text v-if="item.name == '活跃时长'">h</text><text v-if="item.name == '正确率'">%</text></view>
				<view class="name">{{item.name}}</view>
				<view class="ranking">排行<text v-if="item.rank <= 100">{{item.rank}}</text>
					<i v-if="item.state == 'true'" class="iconfont iconshangsheng"></i>
					<i v-else-if="item.state == 'false'" class="iconfont iconxiajiang-copy"></i>
					<text v-else-if="item.state == 'fail'">100外</text>
				</view>
			</view>
		</view>
		<view class="center">
			<view class="typeName" @tap="centerClick">{{centerName}}</view>
			<text>前100名排行榜</text>
		</view>
		<view class="centerPop" v-if="centerIf">
			<view class="centerItem" v-for="(item,index) in centerList" :key="index" @tap="centerItem(index,item.num)" :class="centerIndex == index ? 'activeColor':''">{{item.name}}</view>
		</view>
		<view class="list" v-if="list.length > 0">
			<view class="listItem" v-for="(item,index) in list" :key="index">
				<view class="index">{{index+1}}</view>
				<view class="info">
					<view class="image"><image :src="item.avatar" mode="aspectFill"></image></view>
					<view class="num">{{item.question_num}}t</view>
					<view class="num">{{item.accuracy}}%</view>
					<view class="num">{{item.duration}}h</view>
				</view>
			</view>
		</view>
		<view class="none" v-else>没有记录</view>
	</view>
</template>

<script>
	import uniCalendar from "@/components/uni-calendar/uni-calendar"
	export default{
		components:{
			uniCalendar
		},
		data() {
			return {
				isShow: false,
				topList: [],
				centerList: [
					{num:'1',name:'做题量'},
					{num:'2',name:'正确率'},
					{num:'3',name:'活跃时长'}
				],
				centerName: '做题量',
				centerIf: false,
				centerIndex: 0,
				list: [],
				listType: 1,
				time: '' ,//查询日期
				month: '' ,//查询月份
				BarTitle: '今日学情',
				state: 2,
				Time: '',
				student_id: '',
				monthday : '',
				daytime:0
			}
		},
		onNavigationBarButtonTap(e) {
			if(e.index==0) {
				uni.navigateTo({
					url: 'everyRecord?student_id='+this.student_id
				})
			} else {
				this.isShow = !this.isShow;
			}
		},
		onLoad(e) {
			this.student_id = e.student_id;
			var date = new Date();
			var year = date.getFullYear(); //当前年份
			var month = date.getMonth(); //当前月份
			var day = date.getDate(); //当前日期
			this.time = Date.UTC(year, month, day, -8, 0, 0) / 1000; //当前日期零点
			this.month = Date.UTC(year, month, 1, -8, 0, 0) / 1000; //当前月份一号零点
			this.getUserInfo(this.time);
			var len = {};
			len.start = this.time;
			len.state = this.state;
			this.getRankingList(len);
		},
		methods:{
			/* 日历 */
			change(e) {
				console.log(e);
			},
			ifShow() {
				this.isShow = false;
			},
			centerClick() {
				this.centerIf = !this.centerIf;
			},
			centerItem(index,num) {
				this.centerIndex = index;
				this.centerName = this.centerList[index].name;
				this.centerIf = false;
				this.listType = num;
				var len = {};
				len.state = this.state;
				len.start = this.Time;
				if(this.state == 1) {
					this.getMonthList(len);
				} else if (this.state == 2) {
					this.getRankingList(len);
				}
			},
			/* 按日期查询学生个人情况 */
			getUserInfo(start) {
				this.person(start,1);
			},
			/* 按月份查询学生个人情况 */
			getMonthInfo(start) {
				this.person(start,2);
			},
			person(start,index) {
				var data = {
					time: start,
					user_id: this.student_id
				}
				var url = '';
				if(index == 1) {
					url = 'user/ciondetails.Users/getInforanKing';
				}
				if(index == 2) {
					url = 'user/ciondetails.Users/getMonthInforanKing';
				}
				this.$zapi.apiPost(url,data).then(res => {
					if(res.data.code == 200) {
						var result = res.data.data;
						var test,num,time;
						//result.question_num_ranking_day 今天做题排名
						//result.question_num_ranking 昨天做题排名
						if(result.question_num_ranking_day != null && !result.question_num_ranking) {
							test = 'true';
						} else if(!result.question_num_ranking_day && result.question_num_ranking != null) {
							test = 'false';
						} else if(!result.question_num_ranking_day && !result.question_num_ranking) {
							test = 'fail';
						} else if(result.question_num_ranking_day < result.question_num_ranking) {
							test = 'true';
						} else {
							test = 'false';
						}
						//accuracy_ranking_day 今天正确率排名
						//accuracy_ranking 昨天正确率排名
						if(result.accuracy_ranking_day != null && !result.accuracy_ranking) {
							num = 'true';
						} else if(!result.accuracy_ranking_day && result.accuracy_ranking != null) {
							num = 'false';
						} else if(!result.accuracy_ranking_day && !result.accuracy_ranking) {
							num = 'fail';
						} else if(result.accuracy_ranking_day < result.accuracy_ranking) {
							num = 'true';
						} else {
							num = 'false';
						}
						//accuracy_ranking_day 今天时长排名
						//accuracy_ranking 昨天时长排名
						if(result.duration_ranking_day != null && !result.duration_ranking) {
							time = 'true';
						} else if(!result.duration_ranking_day && result.duration_ranking != null) {
							time = 'false';
						} else if(!result.duration_ranking_day && !result.duration_ranking) {
							time = 'fail';
						} else if(result.duration_ranking_day < result.duration_ranking) {
							time = 'true';
						} else {
							time = 'false';
						}
						var accuracy = parseInt(result.accuracy*100);
						var duration = parseFloat(result.duration/3600).toFixed(1);
						if(!result.duration) {
							this.topList = [
								{num:0,name:'做题量',state:test,rank:result.question_num_ranking_day},
								{num:0,name:'正确率',state:num,rank:result.accuracy_ranking_day},
								{num:0,name:'活跃时长',state:time,rank:result.duration_ranking_day}
							]
						} else {
							this.topList = [
								{num:result.question_num,name:'做题量',state:test,rank:result.question_num_ranking_day},
								{num:accuracy,name:'正确率',state:num,rank:result.accuracy_ranking_day},
								{num:duration,name:'活跃时长',state:time,rank:result.duration_ranking_day}
							]
						}
					} else {
						this.topList = [
							{num:0,name:'做题量',state:test,rank:result.question_num_ranking_day},
							{num:0,name:'正确率',state:num,rank:result.accuracy_ranking_day},
							{num:0,name:'活跃时长',state:time,rank:result.duration_ranking_day}
						]
					}
				})
			},
			/* 按日期查询排行榜列表 */
			getRankingList(len) {
				this.daytime=len.start;
				this.peopleList(len,1);
			},
			/* 按月份查询排行榜列表  */
			getMonthList(len) {
				this.peopleList(len,2);
			},
			peopleList(len,index) {
				this.state = len.state;
				this.Time = len.start;
				var time = new Date(len.start * 1000);
				this.startYear = time.getFullYear(time);
				this.startMonth = time.getMonth(time) + 1;
				this.startDate = time.getDate(time);
				var url = ''
				if(index == 1) {
					url = 'user/ciondetails.Users/getrankingList';
					if(this.time == len.start) {
						this.BarTitle = '今日学情'
					} else {
						this.BarTitle = this.startYear+'年'+this.startMonth+'月'+this.startDate+'日学情'
					}
				} else if (index == 2) {
					url = 'user/ciondetails.Users/getMonthkingList';
					this.BarTitle = this.startYear+'年'+this.startMonth+'月学情'
					
				}
				// #ifdef APP-PLUS
				var webView = this.$mp.page.$getAppWebview();
				webView.setTitleNViewButtonStyle(2, {
					text: this.BarTitle,  
				}); 
				// #endif
				var data = {
					type: this.listType,
					time: len.start
				}
				this.$zapi.apiPost(url,data).then(res => {
					if(res.data.code == 200) {
						this.list = res.data.data;
						for(var i = 0; i < this.list.length; i++) {
							this.list[i].accuracy = parseInt(this.list[i].accuracy*100);
							this.list[i].duration = parseFloat(this.list[i].duration/3600).toFixed(1);
						}
					} else {
						this.list = [];
					}
				})
			}
		}
	}
</script>

<style>
	/* 顶部背景 */
	.topBg{
		width: 100%;
		height: 120upx;
		background-color: #FF9900;
	}
	/* 顶部模块 */
	.top{
		width: 690upx;
		position: relative;
		top: -100upx;
		left: 30upx;
		right: 30upx;
		background-color: #FFFFFF;
		box-shadow: 0px 3px 6px rgba(0,171,130,0.15);
		opacity: 1;
		border-radius: 20upx;
		display: flex;
		justify-content: flex-start;
		padding: 20upx 0 24upx;
	}
	.topItem{
		width: 33.3%;
	}
	.time{
		color: #333333;
		font-size: 58upx;
		text-align: center;
	}
	.name{
		color: #999999;
		font-size: 30upx;
		text-align: center;
	}
	.ranking{
		color: #999999;
		font-size: 26upx;
		background-color: #F7F7F7;
		border-radius: 20upx;
		padding: 8upx 0;
		text-align: center;
		width: 140upx;
		margin-left: 44upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.iconshangsheng{
		color: #42D073;
		font-size: 22upx;
		line-height: 1;
	}
	.iconxiajiang-copy{
		color: #FFB800;
		font-size: 22upx;
		line-height: 1;
	}
	/* 中间模块 */
	.center{
		width: 690upx;
		margin: -70upx auto 20upx;
		display: flex;
		justify-content: flex-end;
	}
	.center text{
		color: #666666;
		font-size: 28upx;
	}
	.typeName{
		color: #00D5A2;
		font-size: 28upx;
		display: flex;
		align-items: center;
	}
	.typeName:after{
		content: '';
		border-width: 10upx;
		border-color: #00D5A2;
		border-bottom-width: 0;
		border-style: dashed;
		border-bottom-style: solid;
		border-left-color: transparent;
		border-right-color: transparent;
		margin: 0upx 30upx 0 12upx;
	}
	.centerPop{
		float: right;
		margin-right: 240upx;
		box-shadow: 0px 6px 6px rgba(0,0,0,0.15);
	}
	.centerItem{
		color: #666666;
		width: 140upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		background-color: #FFFFFF;
	}
	.activeColor{
		color: #00D5A2;
	}
	/* 列表模块 */
	.list{
		width: 690upx;
		margin: 0 auto;
	}
	.listItem{
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		margin-bottom: 20upx;
		display: flex;
		justify-content: space-between;
	}
	.listItem .index{
		color: #999999;
		font-size: 30upx;
		margin: 0 10upx;
		line-height: 100upx;
	}
	.info{
		width: 580upx;
		display: flex;
		justify-content: flex-start;
		background: linear-gradient(270deg,rgba(254,118,91,0.1) 0%,rgba(254,185,104,0.1) 100%);
		border-radius: 0px 8upx 8upx 60upx;
	}
	.image{
		width: 70upx;
		height: 70upx;
		margin-left: -34upx;
		margin-top: -6upx;
	}
	image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.num{
		width: 33.3%;
		color: #AB6121;
		font-size: 36upx;
		text-align: center;
		line-height: 100upx;
	}
	.none{
		color: #666666;
		text-align: center;
		margin-top: 100upx;
		font-size: 36upx;
	}
</style>
